<!--
 * @Author: wangming
 * @Date: 2021-10-28 16:22:08
 * @LastEditors: wangming
 * @LastEditTime: 2022-03-22 17:07:02
 * @FilePath: /hanma-application-designer-fed/src/pages/designUniversal/__components__/dynamicForm/mainContent/__layouts/hlSearch/_components/index.vue
 * @Description:  设计器内部表单外部
-->
<template>
  <el-col :id="config.key" class="rel pr12 pl12 mcol sz">
    <img
      src="@/assets/icon/del.png"
      width="16"
      :class="{ dn: !itemChecked }"
      class="abs del poi"
      @click.stop="$emit('deltag')"
    />
    <div class="ks-row-middle lhlabel">
      <div class="f14 g6 mr10 label" :title="config.__config.label">
        {{ config.__config.label }}
      </div>
      <component
        class="ks-col"
        :is="config.tagName"
        :config="config"
      ></component>
    </div>
  </el-col>
</template>

<script>
import searchComDesgin from "./index";
export default {
  components: { ...searchComDesgin },
  props: {
    config: {
      type: Object,
      default: {},
    },
    itemChecked: {
      // 判断是否被选中
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  computed: {},
};
</script>

<style lang="scss" scoped>
.hide {
  background-image: url("~@/assets/image/hide.png");
}

.mcol {
  min-height: 70px;
  padding-top: 12px;
  &:hover > img {
    display: inline-block;
  }
}
.del {
  top: 0;
  right: 0;
}
.label {
  max-width: 50%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
